<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh"  success-text="刷新成功">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.id">
        <div>
          <div class="wrap">
            <div class="img_wrap">
              <img :src="item.user.avatarUrl" alt="" />
            </div>
            <div class="content_wrap">
              <div class="header_wrap">
                <div class="info_wrap">
                  <p>{{item.user.nickname}}</p>
                  <p>{{item.time | dataFormate}}</p>
                </div>
                <div>{{item.likedCount}}点赞</div>
              </div>
              <div class="footer_wrap">{{item.content}}</div>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>
import {hotCommentAPI} from "@/api";
import moment from "moment"
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
        refreshing: false,
        off:0
    };
  },
  filters:{
     dataFormate(val) {
       return moment(val).format('YYYY-MM-DD')
     }
  },
  methods: {
    async onLoad() {
     if (this.refreshing) {
          this.list = [];
        
        }
      const res = await hotCommentAPI({
        offset:this.off
      });
      let arr = [...this.list]
      arr = arr.concat(res.data.hotComments)  //拼接两个数组
      this.list = arr
      this.loading = false //异步数据请求完毕(一定要让loading为false,不然下次到底了不会执行loading函数)
        this.refreshing = false; //下拉小圈圈关掉

        //准备请求下一页的偏移量
        this.off += 10 //和limit值对上
        if(res.data.hotComments.length == 0) {
          this. finished = true
        }
    },
      onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;

      this.off = 0 //下拉刷新的时候,让偏移量回到0 请求第一页的数据
      this.onLoad();
    },
  },
};
</script>

<style scoped>
/* 容器样式 */
.wrap {
  display: flex;
}
.img_wrap {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.266667rem;
}
.img_wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.content_wrap {
  flex: 1;
}

/* 右侧头部 */
.header_wrap {
  display: flex;
}
.info_wrap {
  flex: 1;
}
.info_wrap p:first-child {
  font-size: 0.373333rem;
  color: #666;
}
.info_wrap p:last-of-type {
  font-size: 0.24rem;
  color: #999;
}
.header_wrap div:last-of-type {
  color: #999;
  font-size: 0.293333rem;
}

/* 评论内容 */
.footer_wrap {
  font-size: 0.4rem;
  color: #333;
}
</style>